<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Axios  测试</title>
		<script src="../js/axios.js"></script>
	</head>
	<body>
		<h1>Axios测试案例-1</h1>
		
		<script type="text/javascript">
			/*
			axios.get("url地址","传递的数据")*/
			/*
			1.可以编辑axios，发送AJax请求
			2.不同的服务器之间发送ajax请求时会有“跨域问题”
			3.解决跨域问题用@CrossOrigin
			*/

			var url = "http://localhost:8080/hello";
			axios.get(url)
			.then(function(result){	//回调函数
				console.log(result)
			})	
			/**
			 *var 关键字：没有作用域的概念
			 *let 相当于var，有作用域 更加安全
			 *const 定义常量的
			 * 关于axios数据返回值对象的说明：
			 * 		axios为了接收后端服务器数据，利用promise对象封装对象
			 */
			let url1 = "http://localhost:8080/axios/getUserById?id=100";
			axios.get(url1)
			.then(function(promise){
				console.log(promise.data)
			})
			/**
			 *1.get请求 对象传参
			 * 2.语法说明：
			 * 	关键字：params : 对象信息
			 * */
			let	user2 = {name:"jack",age:23}
			let url2 = "http://localhost:8080/axios/getUserByNA"
			axios.get(url2,{params:user2})
			.then(function(promise){
				console.log(promise)
				console.log(promise.status)
				if(promise.status === 200){
					console.log(promise.data)
					console.log("业务成功")
				}else{
					console.log("业务失败")
				}
			})
			
			/**
			 * 需求：利用restFul的风格实现前后端交互
			 * URL:http://localhost:8080/axios/getUserByNS/tomcat/男
			 * 模板字符串写法：ES6引入的新功能
			 * 语法：
			 * 		1.使用反引号 `
			 * 		2.作用： 可以保证字符串的格式
			 * 				 可以动态获取变量的值
			 * */
			 let user3 = {name:"tomcat",sex:"男"}
			 let url3 = `http://localhost:8080/axios/getUserByNS/${user3.name}/${user3.sex}`;
			 axios.get(url3)
			.then(function (promise) {
				console.log(promise.data)
			})
			 
		</script>
	</body>
</html>
